<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="course-cover">
			<view class="course-video">
				<video
					:src="info.image"
					:autoplay="false"
					:loop="false"
					:muted="false"
					:controls="true"
					:objectFit="'contain'"
					@play="onPlay"
					@pause="onPause"
					@ended="onEnded"
					:enableProgressGesture="true"
					style="width: 100%; height: 400rpx"
				></video>
			</view>
		</view>
		<view class="course-info">
			<view class="header">
				<view class="price">
					￥
					<text>{{ info.underlinedPrice > 0 ? info.underlinedPrice : '免费' }}</text>
				</view>
				<view class="hot">
					<image style="width: 40rpx; height: 40rpx" src="../../static/hot.svg" mode=""></image>
					<text>{{ info.readCount }}人学习</text>
				</view>
			</view>
			<view class="title">
				{{ info.name }}
			</view>
			<view class="overview">
				{{ info.overview }}
			</view>
			<view class="bottom-box">
				<view class="b-left">主讲：{{ info.teacherName }}</view>
				<view style="display: flex" class="b-right">
					<u-button style="margin: 0 10px" type="primary" size="small" text="我要报名"></u-button>
				</view>
			</view>
		</view>

		<view class="course-desc">
			<view class="title">课程介绍</view>
			<view class="content" v-html="info.content"></view>
		</view>
	</view>
</template>

<script>
import env from '@/config/envConfig.js';
import * as qiniu from 'qiniu-js';
export default {
	data() {
		return {
			selectedJobIndex: null, // 选中的作业索引
			courseId: '',
			teacherAdId: '',
			info: {},
			jobList: [],
			form: {
				homeworkId: null,
				chapterId: null,
				homeworkImages: [],
				homeworkDescription: ''
			},
			showModal: false
		};
	},
	onLoad(options) {
		this.courseId = options.id;
		this.teacherAdId = options.teacherAdId;
		this.getCourseDetailInfo();
	},
	methods: {
		getCourseDetailInfo() {
			uni.$u.http
				.post(
					'/user/info/public/courseDetail',
					{
						id: this.courseId
					},
					{
						custom: {
							load: false,
							auth: true
						}
					}
				)
				.then((res) => {
					res.content = res.content.replace(/\<img(.*?)src/g, '<img style="max-width:100%!important;height:auto;display:block;" src');
					res.content = res.content.replace(/\<p/g, '<p style="line-height:1.8;word-break: break-all;"');
					this.info = res;
				})
				.catch((err) => {
					this.$u.toast('加载错误~');
				});
		}
	}
};
</script>

<style lang="less" scoped>
/* 保持原样式不变 */
.course-cover {
	width: 100%;
	image {
		width: 100%;
		height: 450rpx;
	}
}

.course-info {
	width: 96%;
	margin: auto;
	background: #fff;
	border-radius: 30rpx;
	mini-height: 380rpx;
	position: relative;
	top: -30rpx;
	padding: 10rpx;

	.header {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx;

		.price {
			font-size: 32rpx;
			color: #e40212;

			text {
				font-size: 48rpx;
			}
		}

		.hot {
			font-size: 30rpx;
			color: #666;
			display: flex;
			align-items: center;
			image {
				padding-right: 6rpx;
			}
		}
	}

	.title {
		font-weight: bold;
		padding: 10rpx;
	}

	.overview {
		font-size: 28rpx;
		color: #666;
		padding: 10rpx;
	}

	.bottom-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx;

		.b-left {
			font-size: 26rpx;
			color: #666;
		}
	}
}

.course-desc {
	width: 96%;
	margin: auto;
	background: #fff;
	border-radius: 30rpx;
	padding: 20rpx;
	min-height: 380rpx;

	.title {
		position: relative;
		font-size: 30rpx;
		font-weight: bold;
		padding-left: 16rpx;
		margin-bottom: 10rpx;

		&::before {
			content: '';
			position: absolute;
			left: 0px;
			top: 10%;
			width: 6rpx;
			border-radius: 4rpx;
			background: #3a85ee;
			height: 80%;
		}
	}

	.content {
		font-size: 28rpx;
		box-sizing: border-box;
		overflow: hidden;
	}
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4); /* 背景透明度适中 */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
}

.modal-content {
	width: 85%;
	max-width: 600rpx;
	background-color: white;
	border-radius: 20rpx; /* 增加圆角 */
	padding: 30rpx;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}

.modal-header {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	text-align: center;
	color: #333;
}

.modal-body {
	display: flex;
	flex-direction: column;
	gap: 20rpx; /* 使用 gap 增加表单项的间距 */
}

.form-item {
	margin-bottom: 20rpx;
	display: flex;
	flex-direction: column;
	label {
		font-size: 30rpx;
		color: #666;
		margin-bottom: 10rpx;
	}
}

.picker {
	padding: 15rpx;
	border: 1rpx solid #ddd;
	border-radius: 12rpx;
	font-size: 30rpx;
	color: #333;
	background-color: #f9f9f9;
}

.image-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 10rpx; /* 使用 gap 简化图片间距 */
	margin-top: 10rpx;
	.uploaded-image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
		border: 1rpx solid #ddd;
	}
}

textarea {
	width: 100%;
	height: 150rpx;
	padding: 15rpx;
	border: 1rpx solid #ddd;
	border-radius: 12rpx;
	font-size: 28rpx;
	color: #333;
	background-color: #f9f9f9;
	box-sizing: border-box;
	resize: none; /* 禁止手动调整大小 */
}

.modal-footer {
	display: flex;
	justify-content: space-between;
	margin-top: 20rpx;
}

.cancel-button,
.submit-button {
	width: 45%; /* 调整按钮的宽度 */
	height: 50rpx;
	font-size: 30rpx;
	border-radius: 12rpx;
	color: white;
	text-align: center;
	line-height: 50rpx;
	transition: background-color 0.3s ease;
}

.cancel-button {
	background-color: #999; /* 统一为灰色按钮 */
}

.cancel-button:hover {
	background-color: #888; /* 悬停时按钮颜色 */
}

.submit-button {
	background-color: #3a85ee; /* 蓝色提交按钮 */
}

.submit-button:hover {
	background-color: #3367d6; /* 悬停效果 */
}
</style>
